<html>
    <head>
        <title>员工列表页面</title>
        <script src="素材/js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div><font size="5">员工列表页面</font></div><br>
            <div style="color: rgba(0, 0, 255, 0.511);size: 2;">员工管理</div>
            <br>
            <span>姓名  
                <input type="text" placeholder="请输入员工姓名" style="width: 170px;height: 30px;">
            </span>
            <span>
                性别
                <select name="gender" style="width: 170px;height: 30px;">
                    <option value="">请选择</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </span>
            <span>
                <input type="button" value="查询" style="background-color: rgba(0, 0, 255, 0.384);width: 80px;height: 25px">
            </span>
            <br>
            <br>
            <span>
                <input type="button" value="+新增员工" style="background-color: rgba(0, 0, 255, 0.384);width: 120px;height: 25px">
            </span>
            <span>
                <input type="button" value="-批量删除" style="background-color: rgba(0, 0, 255, 0.384);width: 120px;height: 25px">
            </span>
            <br/>
            <br/>
            <table border="1" cellspacing="0" width="60%">
                <tr align="center" style="background-color: rgba(220, 220, 220, 0.356);">
                    <th>
                        <input type="checkbox">
                    </th>
                    <td>姓名</td>
                    <td>图像</td>
                    <td>性别</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>最后操作时间</td>
                    <td>操作</td>
                </tr>
                <tr align="center" v-for="e in employees">
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>{{e.name}}</td>
                    <td>图像</td>
                    <td>
                        <span v-show="e.gender==1">男</span>
                        <span v-show="e.gender==2">女</span>
                    </td>
                    <td>{{e.job}}</td>
                    <td>{{e.joinTime}}</td>
                    <td>{{e.updateTime}}</td>
                    <td style="color: orange;">
                        编辑    删除
                    </td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                employees:[
                    {
                        name:"赵敏",
                        gender:2,//1 男 , 2 女
                        job:"班主任",
                        joinTime:"2008-12-18",
                        updateTime:"2022-07-22 12:05:20"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    },
                    {
                        name:"风清扬",
                        gender:1,//1 男 , 2 女
                        job:"讲师",
                        joinTime:"2015-07-22",
                        updateTime:"2022-07-21 15:00:00"
                    }
                ]
            }
        });
    </script>
</html>